<!DOCTYPE html>
<html>
<!--
author:guojunyu
desc:this demo is about blog. PLEASE NOTE:If you have trouble running it ,try any of the other demos or connect with auther.
A ny individuals and organizations and not for commercial use, professiona website for customized web site.
-->
<head>
		<meta charset="utf-8">
		<link href="/static/css/login_reglogin.css" rel='stylesheet' type='text/css' />
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
		<div class="bg">
				<img src="/static/images/c.jpg" alt="">
			</div>

	<div id='test'></div>

	<div class="main">
		<div class="header" >
			<h1>创建一个新账户！</h1>
		</div>
		<p></p>
				<ul class="left-form">
					<h2>新账户:</h2>
					<li>
            <input type="text" class="username" name="username" placeholder="请输入用户名" required maxlength="11"/>
						<div class="clear"> </div>
					</li> 
					<li>
            <input type="email" class="email" name="email" placeholder="请输入邮箱" required />
						<div class="clear"> </div>
					</li> 

					<li>
            <input type="phone" class="phone" name="phone" placeholder="请输手机号" required/>
						 <input type="button" id="sms" onclick="sendSMS();settime(this)" value="免费获取验证码">
						<div class="clear"> </div>
					</li> 
					<li>
            <input type="sms_num" class="sms_num" name="sms_num" placeholder="请输入验证码" required />
						<div class="clear"> </div>

			<li>
            <input type="password" class="password_1" name="password_1" placeholder="请输入密码" required minlength="6" maxlength="11"/>
						<div class="clear"> </div>
            </li>
            <li>
              <input type="password" class="password_2" name="password_2" placeholder="请再次确认密码" required minlength="6" maxlength="11"/>
              <div class="clear"> </div>
            </li>
            <li style="border:none">
				<input type="button" value="创建并登录" onclick="register()">
            </li>
				</ul>
				<div class="clear"> </div>
	</div>
</body>


    <script>
        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
            }
            return null;
        }


	var countdown=60;
	function settime(obj) {
    	if (countdown == 0) {
        	obj.removeAttribute("disabled");
        	obj.value="免费获取验证码";
			countdown = 60;
        	return;
    	} else {
        	obj.setAttribute("disabled", true);
        	obj.value="重新发送(" + countdown + ")";
        	countdown--;
    	}
		setTimeout(function() {
    		settime(obj) }
    	,1000)
	}
    function register(){
        var username=$('.username').val();
		var email=$('.email').val();
		var password_1=$('.password_1').val();
		var password_2=$('.password_2').val();
        var phone=$('.phone').val();
		var sms_num=$('.sms_num').val();
       // 增加验证码！！！
		var post_data={'username':username,
		               'email':email,
					   'phone':phone,
					   'password_1':password_1,
					   'password_2':password_2,
					   'sms_num':sms_num,
		              }
	    console.log(post_data)//收集前端输入的信息
		//发送为　异步ajax的post请求
        $.ajax({
			url:'http://127.0.0.1:8000/v1/users',
			type:'POST',
			//数据json字符串化
			data:JSON.stringify(post_data),
			//发送给服务器的数据类型contentType
			contentType:'application/json',
			
			//服务器返回的数据dataType
			dataType:'json',
			success:function(res){
　　　　　　　　　if(res.code==200){
                   alert("注册成功！");
				   //在本地储存中保存token
				   window.localStorage.setItem('dnblog_token',res.data.token)
				   window.localStorage.setItem('dnblog_user',res.username)
               }else{
				  
				   alert(res.error);
                }

			}
		})

	}

	function sendSMS(){
		var phone =$('.phone').val();
		var post_data = {'phone':phone};
		console.log(phone)
		//ajax post
		$.ajax({
			url:'http://127.0.0.1:8000/v1/users/sms',
			type:'POST',
			data:JSON.stringify(post_data),
			contentType:"application/json",
			dataType:'json',


			success:function(res){
				if (res.code==200){
					alert('短信已经发送至',res.phone);
				}else{
					alert(res.error)
				}
			}

		})
	}

    </script>


</html>
